import React, {FC, useState, useEffect} from 'react'
import {Tab, Tabs, Box, Typography, Button} from '@mui/material'
import {
  useConnection,
  useNetworkSelector2,
  useChainCheck,
  useSwitchChain,
  useAccountBalance,
} from '@/components/ConnectWallet/useWallets'
interface IProps {}

const Wallet: FC<IProps> = props => {
  const {connection, disconnect, account} = useConnection()
  const {
    currentChainId,
    library,
    handleConnect,
    networkList,
    addCustomNode,
    removeCustomNode,
  } = useNetworkSelector2()
  const CustomNode = {
    name: 'DogeChain',
    chainId: 2000,
    rpcUrl: 'https://rpc.dogechain.dog',
  }

  const {balance, signature, onBalance, onSignature} = useAccountBalance()
  useEffect(() => {
    onBalance()
  }, [balance, onBalance])
  return (
    <>
      <Button
        onClick={() => {
          connection()
        }}
      >
        链接钱包
      </Button>
      <Typography>{account}</Typography>
      <Button
        onClick={() => {
          disconnect()
        }}
      >
        断开
      </Button>
      <Button
        onClick={() => {
          addCustomNode(CustomNode, library)
        }}
      >
        添加Chain节点
      </Button>
      <Box>
        <h1>Connected to chain {currentChainId}</h1>
        <h1>Current account: {account}</h1>
        {networkList.map(({name, chainId, rpcUrl}) => (
          <Box>
            <Button
              key={chainId}
              onClick={() => handleConnect(chainId, library)}
              disabled={currentChainId === chainId}
            >
              切换节点 {name} ({rpcUrl})
            </Button>
            <Button
              onClick={() => removeCustomNode(chainId)}
              style={{color: 'red'}}
            >
              {' '}
              x
            </Button>
          </Box>
        ))}
      </Box>
      <Button
        onClick={() => {
          onBalance()
        }}
      >
        获取账户余额
      </Button>{' '}
      <Typography>账户余额:{balance}</Typography>
      <Button
        onClick={() => {
          onSignature()
        }}
      >
        获取账户签名
      </Button>
      <Typography>{signature}</Typography>
    </>
  )
}

export default Wallet
